<template>
  <div class="contentbox">
    <div class="lefttree">
      <!-- <t-space direction="vertical">
        <t-tree :data="items" hover :expand-level="1" :transition="transition" />
      </t-space> -->
      <tree></tree>
    </div>
    <div class="rightbox">
      <div class="box">
        <div class="topbox">
          <div class="topLeft">知识库</div>
        </div>
        <dk-divider style="margin: 20px"></dk-divider>
        <div class="centerbox">
          <div class="formbox">
            <t-form
              v-show="!isFold"
              ref="form"
              :rules="FORM_RULES"
              :data="formData"
              :layout="'inline'"
              scroll-to-first-error="smooth"
              :class="isFold ? '' : 'paddingBottom'"
              labelAlign="right"
            >
              <t-form-item label="知识点" name="knowledge" :label-width="90">
                <t-input
                  placeholder="请输入知识点"
                  v-model="formData.knowledge"
                  style="width: 165px"
                />
              </t-form-item>
              <t-form-item
                label="答案"
                name="answer"
                :label-width="90"
                requiredMark
              >
                <t-input
                  placeholder="请输入答案"
                  v-model="formData.answer"
                  style="width: 165px"
                />
              </t-form-item>

              <t-form-item
                label="问法/关键词"
                name="keyword"
                :label-width="90"
                requiredMark
              >
                <t-input
                  placeholder="请输入问法/关键词"
                  v-model="formData.keyword"
                  style="width: 165px"
                />
              </t-form-item>

              <t-form-item
                class="formHandleBox"
                v-if="!isFold"
                :label-width="0"
              >
                <t-space size="small" style="gap: 10px; width: 130px">
                  <dk-button @click="handleQuery">查询</dk-button>
                  <dk-button @click="handleReset">添加</dk-button>
                </t-space>
              </t-form-item>
            </t-form>
          </div>
          <div class="tableBox">
            <div class="topbuttons">
              <t-button
                @click="onbatchdelete"
                :disabled="disbatchsize"
                theme="danger"
                style="margin-right: 10px"
                >批量删除</t-button
              >
              <t-button
                @click="batchmoveisshow = true"
                :disabled="disbatchsize"
                theme="default"
                >批量移动</t-button
              >
              <dk-button type="Primary" @click="onimportingknowledge"
                >导入</dk-button
              >

              <t-dropdown
                :options="options"
                trigger="click"
                @click="clickHandler"
              >
                <t-space>
                  <dk-button type="Primary">
                    <icon-svg
                      style="width: 18px; height: 18px"
                      name="icon-chevronDown"
                    ></icon-svg>
                    导出
                  </dk-button>
                </t-space>
              </t-dropdown>
            </div>

            <t-table
              row-key="index"
              :pagination="pagination"
              :columns="columns"
              :data="data"
              drag-sort="col"
              lazy-load
              @drag-sort="onDragSort"
              :reserve-selected-row-on-paginate="false"
              :editable-row-keys="editableRowKeys"
              :defaultSelectedRowKeys="selectedRowKeys"
              @select-change="rehandleSelectChange"
            ></t-table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <addknowledge :isshow="isshow" @event="close"></addknowledge>
  <importingknowledge
    :isshow="isshowimpknow"
    @event="closeimpknow"
  ></importingknowledge>
  <!-- 批量删除 -->
  <t-dialog
    v-model:visible="batchisshow"
    theme="warning"
    header="批量删除"
    @confirm="onClickConfirm"
    width="500px"
  >
    <template #body>
      <div>
        是否确认删除当前选中的{{ selectedRowKeys.length }}条知识点？<br />
      </div>
    </template>
    <template #footer>
      <!-- 全部删除按钮 -->
      <dk-button style="margin-right: 10px" type="warning" @click="deleteAll"
        >确认</dk-button
      >

      <!-- 取消按钮 -->
      <dk-button type="grey" @click="batchisshow = false">取消</dk-button>
    </template>
  </t-dialog>

  <!-- 批量移动 -->
  <t-dialog
    v-model:visible="batchmoveisshow"
    header="批量移动"
    @confirm="onClickConfirm"
    width="500px"
    :footer="false"
  >
    <template #body>
      <t-form
        ref="moveform"
        :rules="MOVEFORM_RULES"
        :data="moveformData"
        :colon="true"
        reset-type="initial"
        @reset="movecloe"
        @submit="onSubmit"
        scrollToFirstError="smooth"
        label-width="80px"
      >
        <t-form-item label="分组" name="Grouping">
          <t-cascader
            v-model="moveformData.Grouping"
            :options="treeData[0].children"
            clearable
            @change="onChange"
            @focus="onFocus"
            @blur="onBlur"
          />
        </t-form-item>

        <t-form-item class="buttonbut">
          <t-space size="small">
            <dk-button
              style="margin-right: 10px"
              type="warning"
              @click="deleteAll"
              >确认</dk-button
            >
            <t-button theme="default" type="reset">取消</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="jsx">
import { reactive, ref, watchEffect } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import addknowledge from './components/addknowledge.vue';
import importingknowledge from './components/importingknowledge.vue';
import { initialColumns } from './formcolumn/knowledgeBase';
import { treeData } from './formcolumn/knowledgeBase';
import Tree from './components/tree.vue';
const moveform = ref(null);
// form 表单
const moveformData = reactive({
	Grouping: '', //分组
});
//   批量移动校验
const MOVEFORM_RULES = {
  Grouping: [{ required: true, message: "请选择分组" }],
  //   Industrymsg: [{ required: true, message: "请选择行业信息" }],
  //   Scenemsg: [{ required: true, message: "请选择场景信息" }],
};
//   下拉按钮
const options = ref([
	{ content: '导出当前分组', value: 1 },
	{ content: '导出全部分组', value: 2 }
]);

// 新增知识点弹窗开关
const isshow = ref(false);
// 导入知识点弹窗开关
const isshowimpknow = ref(false);
// 批量删除弹窗开关
const batchisshow = ref(false);
// 批量移动弹窗开关
const batchmoveisshow = ref(false);
// form 表单
const formData = reactive({
	knowledge: '', //知识点
	answer: '', //答案
	keyword: '' //关键词
});

const editableRowKeys = ref(['1']);

const selectedRowKeys = ref([]); //选中行数组
const rehandleSelectChange = (value, ctx) => {
	//全选事件
	selectedRowKeys.value = value;
	// selectedRowKeys.value = [...selectedRowKeys.value, ...value];
	console.log(value, ctx);
	// console.log(selectedRowKeys.value);
};
// 批量按钮的开关
const disbatchsize = ref(true);
// 表格操作列
const columnsobj = ref({
	colKey: 'operation',
	title: '操作',
	fixed: 'right',
	width: '164',
	align: 'center',
	cell: (h, { row }) => {
		// const editable = editableRowKeys.value.includes(row.key);
		return (
			<div class="table-operations">
				{
					<dk-button type="primary" hover="color" data-id={row.key} onClick={() => onEdit(row)}>
						编辑
					</dk-button>
				}
				{
					<dk-button style="margin-left: 10px" type="warning" hover="color" data-id={row.key} onClick={ondelete}>
						删除
					</dk-button>
				}
			</div>
		);
	}
});
const columns = ref([...initialColumns, columnsobj.value]);

// 表格数据
const data = [
	{
		index: 1,
		applicant: '1',
		colanswer: '电子签署',
		colknowledge: '宣传物料制作费用',
		colkeyword: '2022-01-01'
	},
	{
		index: 2,
		applicant: '2',
		colanswer: '签署',
		colknowledge: '宣传',
		colkeyword: '2022-01-01'
	}
];

// 分页
const pagination = reactive({
	//   current: 2,
	//   pageSize: 5,
	defaultCurrent: 1,
	defaultPageSize: 5,
	total: data.length,
	// showJumper: true,
	showPageSize: true
});

// 编辑
const onEdit = (e) => {
	// 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
	//   const { id } = e.currentTarget.dataset;
	//   if (!editableRowKeys.value.includes(id)) {
	//     editableRowKeys.value.push(id);
	//   }
	console.log('编辑', e);
};

// 删除
const ondelete = (e) => {
	// 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
	//   const { id } = e.currentTarget.dataset;
	//   if (!editableRowKeys.value.includes(id)) {
	//     editableRowKeys.value.push(id);
	//   }
	console.log('删除');
};
// 导入按钮
const onimportingknowledge = () => {
  isshowimpknow.value = true;
	console.log('导入按钮');
};
//   导出按钮
const clickHandler = (data) => {
	MessagePlugin.success(`选中【${data.content}】`);
};

// 查询按钮
const handleQuery = () => {
	console.log(formData);
};
// 打开新增弹窗
const handleReset = () => {
	isshow.value = true;
};
// 关闭新增弹窗
const close = (val) => {
	isshow.value = val;
};
// 关闭导入知识点弹窗
const closeimpknow = (val) => {
	isshowimpknow.value = val;
};

// 批量删除
const onbatchdelete = () => {
	// MessagePlugin.success(`批量删除`);
  console.log(selectedRowKeys.value);
  batchisshow.value = true;
}

// 批量移动弹窗关闭
const movecloe = () => {
  moveform.value.reset()
  batchmoveisshow.value = false;
}



watchEffect(() => {
	selectedRowKeys.value.length > 0 ? (disbatchsize.value = false) : (disbatchsize.value = true);
});

// currentData is going to be deprecated
const onDragSort = ({ currentIndex, targetIndex, current, target, data, newData, e, sort }) => {
	console.log('交换行', currentIndex, targetIndex, current, target, data, newData, e, sort);
	if (sort === 'col') {
		columns.value = newData;
	}
};
</script>

<style lang="scss" scoped>
.contentbox {
  width: 100%;
  height: 100%;
  background-color: rgb(231, 231, 232);
  padding: 8px;
  display: flex;
  justify-content: space-between;
  .lefttree {
    flex: 1;
    border-radius: 4px;
    // min-width: 19.5%;
    background-color: #fff;
    padding: 20px;
    margin-right: 8px;
  }
  .rightbox {
    border-radius: 4px;
    max-width: 82%;
    overflow-y: scroll;
  }

  .box {
    // width: 100%;
    // height: 100%;
    background-color: #fff;
    // height: 65px;
    padding: 20px 20px 17px 20px;

    .topbox {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      display: flex;
    }
    .centerbox {
      // padding: 20px 0;
      .tableBox {
        margin-top: 30px;
        .topbuttons {
          display: flex;
          margin-bottom: 2px;
          .dk-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
.formHandleBox {
  margin: 0;
}
.buttonbut {
  display: flex;
  justify-content: flex-end;
}
:deep(.t-pagination .t-pagination__select) {
  position: relative;
  height: 28px !important;
}
:deep(.t-form-inline .t-form__item) {
  min-width: 60px !important;
}
</style>
